Ketika kita ingin menampilkan gambar pada suatu tampilan website, kita dapat mengidentifikasi lebar dan tinggi sebenarnya dari suatu gambar. Hal ini membutuhkan property yang dinamakan naturalWidth dan naturalHeight yang berarti lebar dan tinggi sebenarnya pada suatu gambar.
Kita dapat mendapatkan ukuran gambar original dengan menggunakan javascript.
Berikut adalah source code untuk mengambil ukuran gambar original dengan javascript :
Misal kode html berikut memanggil gambar bernama sistemit.png. Dibawah ini kita dapat membuat fungsi javascript bernama getUkuranOriginal() untuk mendapatkan ukuran gambar sebenarnya. Lalu dengan menggunakan button untuk memanggil fungsinya. Lihat kode berikut ini :
1. Mendapatkan ukuran gambar sebenarnya menggunakan javascript
<img src="sistemit.png" id="image" width="500px" />
<button onclick="getUkuranOriginal()">Get Ukuran Gambar</button>
function getUkuranOriginal(){
var image = document.getElementById('image');
var originalLebar = image.naturalWidth;
var originalTinggi = image.naturalHeight;
alert("Lebar Sebenarnya=" + originalLebar + ", " + "Tinggi Sebenarnya=" + originalTinggi);
}
Selain metode di atas, kita juga dapat mendapatkan ukuran gambar dengan menggunakan php. Lihat source code berikut ini :
2. Mendapatkan ukuran gambar sebenarnya menggunakan php
Langkah pertama untuk mendapatkan ukuran gambar dengan php adalah dengan meletakkan gambar di posisi source code yang akan di buat bernama index.php berikut ini :
<?php
// Memanggil fungsi getimagesize
list($width, $height, $type, $attr) = getimagesize("geeks.png");
// menampilkan dimensi gambar
echo "Lebar Gambar : " . $width . "<br>";
echo "Tinggi Gambar : " . $height . "<br>";
echo "Tipe Gambar :" . $type . "<br>";
echo "Atribut Gambar :" .$attr;
?>
dengan fungsi di atas, kita dapat mengkombinasikan dengan project yang kita buat. Ada banyak sekali kegunaan mendapatkan ukuran original gambar ini. Demikian tutorial kali ini, semoga bermanfaat untuk anda semua.
Terimakasih.
